<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D</title>
</head>

<body>

  <canvas id="canvas2d" width="500" height="500"></canvas>


  <canvas id="canvas3d" width="500" height="500"></canvas>


  <script>
    window.onload = function () {
      rander2d()
      // 
      rander3d()
    }



    function rander2d () {
      const canvasEl = document.getElementById('canvas2d')
      const ctx = canvasEl.getContext('2d')

      ctx.fillStyle = "#0000ff"
      //
      ctx.beginPath();
      ctx.moveTo(250, 40);
      ctx.lineTo(450, 250);
      ctx.lineTo(50, 250);
      ctx.closePath()
      //
      ctx.fill()

    }


    function rander3d () {
      const canvasEl = document.getElementById('canvas3d')
      glCtx = canvasEl.getContext('experimental-webgl')



      const vertBuffer = glCtx.createBuffer()
      glCtx.bindBuffer(glCtx.ARRAY_BUFFER, vertBuffer)
      const verts = [
        0.0, 1.0, 0.0,
        -1.0, 0.0, 0.0,
        0.0, 0.0, 1.0,
        0.0, 1.0, 0.0,
        0.0, 0.0, 1.0,
        1.0, 0.0, 0.0,
        0.0, 1.0, 0.0,
        1.0, 0.0, 0.0,
        0.0, 0.0, -1.0,
        0.0, 1.0, 0.0,
        0.0, 0.0, -1.0,
        -1.0, 0.0, 0.0
      ]

      glCtx.bufferData(glCtx.ARRAY_BUFFER, new Float32Array(verts), glCtx.STATIC_DRAW)





    }
  </script>

</body>

</html>